<template>
  <div class="shape"
       :class="{active}"
       @click="selectCurComponent"
       @mousedown="handleMouseDownOnShape">
    <span v-show="isActive()" class="iconfont icon-rotate-right" @mousedown="handleRotate"></span>
    <span v-show="element.isLock" class="iconfont icon-suo"></span>
    <div
      v-for="item in (isActive()? getPointList() : [])"
      :key="item"
      class="shape-point"
      :style="getPointStyle(item)"
      @mousedown="handleMouseDownOnPoint(item, $event)"
    >
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>

import { onMounted } from "vue";
import eventBus from "@/utils/eventBus";

const props = defineProps({
  active: {
    type: Boolean,
    default: false
  },
  element: {
    required: true,
    type: Object,
    default: () => {
    }
  },
  defaultStyle: {
    required: true,
    type: Object,
    default: () => {
    }
  },
  index: {
    required: true,
    type: [Number, String],
    default: 0
  }
});

// 八个方向
const pointList: Array<string> = ["lt", "t", "rt", "r", "rb", "b", "lb", "l"];
// 左右两个方向
const pointList2: Array<string> = ["r", "l"];

// 每个点对应的初始角度
const initialAngle = {
  lt: 0,
  t: 45,
  rt: 90,
  r: 135,
  rb: 180,
  b: 225,
  lb: 270,
  l: 315
};

const angleToCursor: Array<{ start: number, end: number, cursor: string }> = [ // 每个范围的角度对应的光标
  { start: 338, end: 23, cursor: "nw" },
  { start: 23, end: 68, cursor: "n" },
  { start: 68, end: 113, cursor: "ne" },
  { start: 113, end: 158, cursor: "e" },
  { start: 158, end: 203, cursor: "se" },
  { start: 203, end: 248, cursor: "s" },
  { start: 248, end: 293, cursor: "sw" },
  { start: 293, end: 338, cursor: "w" }
];

const cursors = {}

const selectCurComponent = async () => {
};
const handleMouseDownOnShape = async () => {
};

/**
 * @description 处理旋转
 */
const handleRotate = () => {
};
const handleMouseDownOnPoint = (PointListItem:string,e:Event) =>{}
const getPointList = ()=>{}

const getCursor = () =>{}

const getPointStyle = (PointListItem:string) =>{}
const isActive = () =>{}
const isNeedLockProportion = () =>{}

onMounted(()=>{
  eventBus.on("runAnimation",()=>{})
  eventBus.on("stopAnimation",()=>{})
})
</script>

<style lang="scss" scoped>
.shape {
  position: absolute;

  &:hover {
    cursor: move;
  }
}

.active {
  outline: 1px solid #70c0ff;
  user-select: none;
}

.shape-point {
  position: absolute;
  background: #fff;
  border: 1px solid #59c7f9;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 1;
}

.icon-xiangyouxuanzhuan {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
  color: #59c7f9;
  font-size: 20px;
  font-weight: 600;

  &:active {
    cursor: grabbing;
  }
}

.icon-suo {
  position: absolute;
  top: 0;
  right: 0;
}
</style>